<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- - 只能有一个事件处理程序（使用委托）。
    - 对节点标题以为（在空白处）的点击不会做任何处理。 -->
    <ul>
        <li class="AF">动物
            <ul>
                <li>狗
                    <ul>
                        <li>金毛</li>
                        <li>阿拉斯加</li>
                    </ul>
                </li>
                <li>猫
                    <ul>
                        <li>加菲猫</li>
                        <li>暹罗猫</li>
                    </ul>
                </li>
            </ul>
        </li>

        <li>食物
            <ul>
                <li>蔬菜
                    <ul>
                        <li>土豆</li>
                        <li>西红柿</li>
                    </ul>
                </li>
                <li>肉类
                    <ul>
                        <li>牛肉</li>
                        <li>羊肉</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        console.log(ul);
        ul.onclick = function (event) {
            var target = event.target;
            console.log(target);
            if (target !== undefined) {
                target.firstElementChild.hidden = !target.firstElementChild.hidden
            }
        }
    </script>
</body>

</html>